<template>
    <div class="content">
      <div class="title">补料入库审核</div>
      <div class="head">
        <div class="head-search">
          <span class="search-tip">品号:</span>
          <el-input v-model="materialCode" size="mini" clearable placeholder="请输入物料编号"></el-input>
          <icon-svg name="sweep" width="25px" height="25px" color="" style="cursor:pointer;margin-left:1vw;" @click.native="sweep_btn"></icon-svg>
        </div>
        <div class="head-btns">
          <el-button type="primary" size="mini" @click="search_btn">搜索</el-button>
          <el-button type="info" size="mini" @click="reset_btn">重置</el-button>
        </div>
      </div>
      <div class="main">
        <div class="main-btns"></div>
        <div class="main-table">
          <el-table :data="tableData" :border="false" v-loading="loadingState" style="width: 100%" height="96%">
            <el-table-column prop="warehouseName" label="仓库名称" width="120"></el-table-column>
            <el-table-column prop="applyPersonName" label="生效人" width=""></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
            <el-table-column prop="inOrOutTypeName" label="入库类型" width="120"></el-table-column>
            <el-table-column prop="orderNumber" label="入库单号" width="180"></el-table-column>
            <el-table-column prop="relateTypeName" label="关联单据类型" width="110"></el-table-column>
            <el-table-column prop="relateOrders" label="关联单号" width="150"></el-table-column>
            <el-table-column prop="materialFields.code" label="物料编码" width="120"></el-table-column>
            <el-table-column prop="materialFields.name" label="物料名称" width="140"></el-table-column>
            <el-table-column prop="planAmount" label="计划数量" width=""></el-table-column>
            <el-table-column prop="actualAmount" label="实际数量" width=""></el-table-column>
            <el-table-column prop="stateName" label="状态" width=""></el-table-column>
            <el-table-column prop="approvalStatusName" label="审批状态" width=""></el-table-column>
            <el-table-column prop="" label="操作" fixed="right" width="120">
              <template slot-scope="{ row, $index}">
                <el-button type="text" @click="examine_btn(row)">查看</el-button>
                <el-button type="text" @click="check_btn(row)">入库</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background layout="prev, pager, next, total, sizes, jumper" :total="total"></el-pagination>
        </div>
      </div>
      <!-- dialog弹出框 -->
      <el-dialog title="查看" :visible.sync="dialogVisible" width="50%" @closed="dialogCancelBtn">
        <el-form :model="dialogForm" :disabled="true" label-width="100px">
          <el-form-item label="创建时间">
            <el-date-picker :value="dialogForm.createTime" type="date" :editable="false" value-format="yyyy-MM-dd" size="mini" placeholder="请选择时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-input :value="dialogForm.warehouseName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="生效人">
            <el-input :value="dialogForm.applyPerson" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="入库类型">
            <el-input :value="dialogForm.inOrOutTypeName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="入库单号">
            <el-input :value="dialogForm.orderNumber" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="关联单据类型">
            <el-input :value="dialogForm.relateOrders" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input :value="dialogForm.materialName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="物料编码">
            <el-input :value="dialogForm.materialCode" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="计划数量">
            <el-input :value="dialogForm.planAmount" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="实际数量">
            <el-input :value="dialogForm.actualAmount" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input :value="dialogForm.stateName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-input :value="dialogForm.approvalStatusName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="false">
          <el-button @click="dialogCancelBtn" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogConfirmBtn" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { reqSupplementList, reqSupplementListByMaterialCode, reqUpdateWorkOrderSupplement } from "@/api/workOrder.js";
  import { portrait, autoOrientation, fullscreen } from '@/utils/rotatingScreen.js';
  import { qrCode } from '@/utils/jingzhi.js'
  export default {
    data() {
      return {
        materialCode:"",  //物料编码 614095
        currentPage:1,
        pageSize:10,
        total:0,
        tableData: [],
        loadingState:false,
        dialogVisible: false,
        dialogForm: {
          createTime:"",
          warehouseName:"",
          applyPersonName:"",
          inOrOutTypeName:"",
          orderNumber:"",
          relateOrders:"",
          materialName:"",
          materialCode:"",
          planAmount:"",
          actualAmount:"",
          stateName:"",
          approvalStatusName:""
        }
      }
    },
    mounted() {
      this.getStockInList();
      //自动旋转
      autoOrientation();
    },
    methods: {
      //搜索和重置
      search_btn(){
        let code = this.materialCode;
        if(code.trim() === "") {
          this.$message({type:"warning",message:"请输入物料编码后查询"});
          return;
        }
        this.getStockInListByMaterialCode();
      },
      reset_btn(){
        this.materialCode = "";
        this.currentPage = 1;
        this.pageSize = 10;
        this.getStockInList();
      },
      //点击扫码
      async sweep_btn() {
        try {
          let res = await qrCode();
          this.materialCode = res;
          this.search_btn();
          console.log('调用精致提供的扫码api', res);
        } catch (error) {
          this.$message({ type: 'warning', message: error });
        }
      },
      //分页查询生产入库单
      getStockInList() {
        let page = this.currentPage;
        let size = this.pageSize;
        this.loadingState = true;
        reqSupplementList(page, size).then(res => {
          if(res.data.code === 200){
            this.tableData = res.data.data.content;
            this.total = res.data.data.totalElements;
          }
          console.log('分页获取生产入库单',res);
          this.loadingState = false;
        }).catch(err => {
          this.$message({type:"error",message:"生产入库单获取失败:"});
          this.loadingState = false;
        })
      },
      getStockInListByMaterialCode(){
        let page = this.currentPage;
        let size = this.pageSize;
        let code = this.materialCode;
        if(code.trim() === "") {
          return;
        }
        this.loadingState = true;
        reqSupplementListByMaterialCode(page, size, code).then(res => {
          if(res.data.code === 200){
            this.tableData = res.data.data.content;
            this.total = res.data.data.totalElements;
          }
          this.loadingState = false;
          console.log('分页查询生产入库单',res);
        }).catch(err => {
          this.$message({type:"error",message:"生产入库单查询失败，请重试"});
          this.loadingState = false;
        })
      },
      //表格中的查看和审核
      examine_btn(row) {
        const { createTime,warehouseName,applyPersonName,inOrOutTypeName,orderNumber,relateOrders,planAmount,actualAmount,stateName,approvalStatusName} = row;
        const materialCode = row.materialFields.code;
        const materialName = row.materialFields.name;
        this.dialogVisible = true;
        this.dialogForm.createTime = createTime;
        this.dialogForm.warehouseName = warehouseName;
        this.dialogForm.applyPerson = applyPersonName;
        this.dialogForm.inOrOutTypeName = inOrOutTypeName;
        this.dialogForm.orderNumber = orderNumber;
        this.dialogForm.relateOrders = relateOrders;
        this.dialogForm.materialCode = materialCode;
        this.dialogForm.materialName = materialName;
        this.dialogForm.planAmount = planAmount;
        this.dialogForm.actualAmount = actualAmount;
        this.dialogForm.stateName = stateName;
        this.dialogForm.approvalStatusName = approvalStatusName;
      },
      check_btn(row) {
        this.$confirm('即将入库, 是否继续?', '提示', { confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'})
          .then(() => {
            //执行入库
            reqUpdateWorkOrderSupplement(row.id).then(response => {
              //入库成功
              if(response.data.code === 200){
                this.$message({type:"success",message:"入库成功"});
                //重新请求列表数据
                this.getStockInList();
              }
            }).catch(error => {
              //审核入库失败
              this.$message({type:"error",message:error.response.data.message});
              console.log(error.response.data.message);
            })
          }).catch((error) => {
            this.$message({ type: 'info', message: '已取消' + error});          
        });
      },
      //dialog的取消与确定
      dialogCancelBtn() {
        this.dialogVisible = false;
        this.dialogForm.createTime = "";
        this.dialogForm.warehouseName = "";
        this.dialogForm.applyPersonName = "";
        this.dialogForm.inOrOutTypeName = "";
        this.dialogForm.orderNumber = "";
        this.dialogForm.relateOrders = "";
        this.dialogForm.materialCode = "";
        this.dialogForm.materialName = "";
        this.dialogForm.planAmount = "";
        this.dialogForm.actualAmount = "";
        this.dialogForm.stateName = "";
        this.dialogForm.approvalStatusName = "";
      },
      dialogConfirmBtn() {},
      //pagination
      handleCurrentChange(page){
        this.currentPage = page;
        this.getStockInList();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.getStockInList();
      }
    }
  }
  </script>
  
  <style lang='scss' scoped>
  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .title {
      flex: 0.5;
      display: flex;
      padding: 0 2%;
      align-items: center;
      background: #4095e5;
      color: #fff;
      box-sizing: border-box;
    }
    .head {
      flex: 0.8;
      padding: 0 2%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .head-search {
        display: flex;
        align-items: center;
        width: 40%;
        .search-tip {
          width: 50px;
          font-size: 14px;
        }
      }
      @media screen and (min-width: 300px) and (max-width: 600px) {
        .head-search {
          width: 55%;
        }
      }
    }
    .main {
      flex: 5;
      display: flex;
      flex-direction: column;
      padding: 1% 2%;
      box-sizing: border-box;
      .main-btns{
        // flex: 0.5;
        display: flex;
      }
      .main-table{
        flex: 4;
      }
      .main-pagination{
        flex: 0.5;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .el-form-item{
      margin-bottom: 2px;
      .el-input{
        width: 70%;
      }
  }
  </style>